'use client';

import dynamic from 'next/dynamic';
import { ReactNode } from 'react';
import { MultiChainWalletProvider } from '@/contexts/MultiChainWalletContext';

// 动态导入原有的钱包提供者（保持向后兼容）
const WalletContextProvider = dynamic(
  () => import('./WalletProvider').then((mod) => ({ default: mod.WalletContextProvider })),
  {
    ssr: false,
    loading: () => (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mx-auto mb-4"></div>
          <div className="text-gray-600">加载钱包组件...</div>
        </div>
      </div>
    ),
  }
);

interface ClientWalletProviderProps {
  children: ReactNode;
}

export function ClientWalletProvider({ children }: ClientWalletProviderProps) {
  return (
    <WalletContextProvider>
      <MultiChainWalletProvider>
        {children}
      </MultiChainWalletProvider>
    </WalletContextProvider>
  );
}
